<script lang="ts" setup name="RoleServiceIndex">
import { onMounted, reactive, ref } from "vue";
import RoleList from "./component/role-list.vue";
import RoleFormDialog from "./component/role-form-dialog.vue";
import { IPageTableExpose } from "@whjxtech/jxtech-component";
const RoleListRef = ref();
const RoleIndexState = reactive({
  //获取PageTableExpose
  getListTableRef: () => RoleListRef.value.getListTableRef() as IPageTableExpose,
  //加载表格
  loadTable: () => RoleIndexState.getListTableRef().loadTable(),
  //新增按钮点击操作
  onAddButtonClick: () => (RoleIndexState.roleFormDialogVisible = true),
  //删除按钮点击操作
  onDeleteButtonClick: () => RoleListRef.value.deleteTableData(),

  ///// 表单弹窗 start //////
  roleFormDialogVisible: false,
  // 表单提交成功回调函数
  onSaveSuccess: () => {
    RoleIndexState.loadTable();
    RoleIndexState.roleFormDialogVisible = false;
  },
  updateRoleFormDialogVisible: (val: any) => {
    RoleIndexState.roleFormDialogVisible = val;
  }
  ///// 表单弹窗 end //////
});
onMounted(() => RoleIndexState.loadTable());
</script>
<template>
  <div class="RoleServiceIndex">
    <role-form-dialog
      ref="RoleFormDialogRef"
      :visible="RoleIndexState.roleFormDialogVisible"
      @save-success="RoleIndexState.onSaveSuccess"
      @update:visible="RoleIndexState.updateRoleFormDialogVisible"
    >
    </role-form-dialog>
    <role-list
      ref="RoleListRef"
      @on-add-button-click="RoleIndexState.onAddButtonClick"
      @on-delete-button-click="RoleIndexState.onDeleteButtonClick"
    ></role-list>
  </div>
</template>
